<template>
  <div class="sidebar">
    <header class="header">
      <div class="avatar">
        <img class="pure-img" src="../assets/avatar.png" alt="头像">
      </div>
      <div class="username">肉松大魔王</div>
      <div class="email">
        939926954@qq.com
        <a href="javascript:;"><i class="icon icon-setting"></i></a>
      </div>
    </header>
    <div class="content">
      <ul class="menus">
        <li class="menu">
          <a href="javascript:;">collection</a>
        </li>
        <li class="menu">
          <a href="javascript:;" @click="$emit('upload')">upload</a>
        </li>
        <li class="menu">
          <a href="javascript:;" @click="$emit('download')">download</a>
        </li>
        <li class="menu">
          <a
            href="javascript:;"
            @click="onChangeLocalMasterCode"
            >local master code ({{ localMasterCodeVisible ? localMasterCode : '******'}})</a>
          &nbsp;
          <a
            href="javascript:;"
            @click="onClickLocalMasterCodeVisible"
            >{{ localMasterCodeVisible ? 'hide' : 'show' }}</a>
        </li>
      </ul>
    </div>
    <footer class="footer">
      <button
        class="btn btn-primary"
        @click="$emit('add-record')"
        ><i class="iconfont pm-icon-tianjia"></i>add record</button>
    </footer>
  </div>
</template>

<script>
import { localStore } from '@/utils/store'
import { PM_LOCAL_MASTER_CODE_KEY, PM_HIDE_LOCAL_MASTER_CODE_KEY } from '@/js/constants'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Sidebar',
  data() {
    return {
      localMasterCodeVisible: false
    }
  },
  computed: {
    ...mapState({
      localMasterCode: state => state.localMasterCode
    })
  },
  created() {
    this.localMasterCodeVisible = localStore.get(PM_HIDE_LOCAL_MASTER_CODE_KEY) || false
  },
  methods: {
    ...mapActions([
      'setLocalMasterCode'
    ]),
    onChangeLocalMasterCode() {
      // eslint-disable-next-line no-alert
      const localMasterCode = window.prompt('enter your local master code', this.localMasterCode)
      if (!localMasterCode || localMasterCode.length === 0) {
        return
      }
      this.setLocalMasterCode(localMasterCode)
      localStore.set(PM_LOCAL_MASTER_CODE_KEY, localMasterCode)
    },
    onClickLocalMasterCodeVisible() {
      this.localMasterCodeVisible = !this.localMasterCodeVisible
      localStore.set(PM_HIDE_LOCAL_MASTER_CODE_KEY, this.localMasterCodeVisible)
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #00B2E3;
  padding-top: 40px;
  .header {
    display: flex;
    align-items: center;
    flex-direction: column;
    .avatar {
      width: 40%;
      border-radius: 50%;
      overflow: hidden;
      background-color: #56A936;
    }
  }
  .pm-icon-tianjia {
    margin-right: 8px;
  }
}
</style>
